<template>
  <div>
    <div class="bigDiv">
      <div style="border-bottom: solid 0.2rem #f5f5f5">
        <a href="url" onclick="javascript:window.history.go(-1); return false;" style="position: absolute;"><img  src="../../assets/goback.png"  style="float: left;margin-top: 0.1rem;"/></a>
        <p style="text-align: center;font-weight: 600;line-height: 1rem;">信用卡预申请</p>
      </div>
      <div class="content">
        <div>
          <p style="font-weight: 600;line-height: 1rem;font-size: 0.36rem;color: #333;">卡片邮寄地址</p>
          <input class="weui-input" v-model="form.address" type="text"  placeholder="请输入收件详细地址，包括省-市-区县-具体地址">
        </div>
        <div style="border-bottom: solid 1px #f5f5f5">
          <p class="cont-wen">中文姓名</p>
          <input class="w-input" v-model="form.name" type="text"  placeholder="请输入您的姓名">
        </div>
        <div style="border-bottom: solid 1px #f5f5f5">
          <p class="cont-wen">姓名拼音</p>
          <input class="w-input" v-model="form.en_name" type="text"  placeholder="请输入您的姓名拼音">
        </div>
        <div style="border-bottom: solid 1px #f5f5f5">
          <p class="cont-wen">身份证号</p>
          <input class="w-input" type="text" v-model="form.id_card"  placeholder="请输入您的身份证">
        </div>
        <div style="border-bottom: solid 1px #f5f5f5">
          <p class="cont-wen">手机号码</p>
          <input class="w-input" v-model="form.mobile" type="text"  placeholder="请输入您的手机号码">
        </div>
        <div style="border-bottom: solid 1px #f5f5f5;display: flex;align-items: center">
          <p class="cont-wen">验证码</p>
          <input class="w-input" v-model="form.yzm" type="text"  placeholder="请输入验证码" style="width: 30%;">
          <img :src="codeImg" style="flex: 1;height: 40px" @click="getCodeImg" alt="">
        </div>
        <div style="margin-top: 0.3rem">
					<span style="width: 7%;float: left;">
						<input type="checkbox" name="fruit" value="banana" style="width: 0.28rem;height: 0.28rem">
					</span>
          <p style="font-size: 0.27rem;display: inline-block;width: 93%;line-height: 0.45rem; margin-top: 2px;">
            本人同意《信用卡征信授权》、《信用卡重要提示》等条款查看详情，本人承诺仅为中国税收居民，查看详情。本人授权如因流程终端未完成申卡，银行可通过不限于网络、电话等方式协助完成，同意资质不符合时按照白金卡、金卡、普卡顺序，降等级发卡。
          </p>
        </div>
      </div>
      <div id="footer">
        <p id="footer_p1">
					<span id="footer_span1" @click="submit">
						<span >确认无误并提交申请</span>
					</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import  {sendMessage,codeImage} from "@/api";
export default {
  name: 'App',
  data() {
    return {
      code:"",
      form:{
        code:"",
        yzm:"",
        uniqid:"",
        name:"",
        en_name:"",
        mobile:"",
        address:"",
        id_card:"",
      },
      codeImg:"",
      // 数据对象
    };
  },
  mounted() {
    this.form.code=this.$route.query.code
    this.getCodeImg()
  },
  methods: {
    submit() {
       console.log(this.form)
      if (!this.form.yzm || !this.form.name || !this.form.en_name || !this.form.mobile || !this.form.id_card || !this.form.address) {
        this.$toast('请完善信息后保存')
        return
      }
      if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.form.mobile)) {
        this.$toast('手机号格式错误')
        return;
      }
      if (!/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.form.id_card)) {
        this.$toast('身份证格式错误')
        return;
      }
      sendMessage(this.form).then((res) => {
        if (res.code == 200) {
          this.$toast('提交成功')
          setTimeout(() => {
            this.$router.replace({
              path:'/info',
              query:{
                credit:res.data.credit,
                exclusive_credit:res.data.exclusive_credit,
                name:res.data.name,
                create_time:res.data.create_time
              }
            })
          }, 1500)
        } else {
          this.$toast(res.msg)
        }
      })
    },
    // 自定义方法
    getCodeImg() {
      codeImage().then((res) => {
        if (res.code == 200) {
          this.codeImg = res.data.image
          this.form.uniqid = res.data.uniqid
        } else {
          this.$toast(res.msg)
        }
      })
    },
  }
};
</script>

<style scoped>
@import "./index.scss";
/* 组件样式 */
</style>
